<template>
	<view class="uni_box home">
		<navbar title='权限卡券'>
		</navbar>
		<view class="content">
			<view class="xlist">
				<view class="xitem " :class="item.status==1||4?'xactive':''" v-for="(item,index) in list " :key="index">
					<image class="kabg" src="@/pages_subject/static/img/kabg.png" mode="" />
					<view class="xinleft">
						<view class="xinnei">
							<text class="xbiao">{{item.name}}</text>
							<text class="lei">有效期：{{item.endtime}}</text>
							<text class="lei">类别：{{item.pay_type}}</text>
						</view>
						<view class="shiview" v-if="item.status==1">
							<view class="shiyong" @click="shiyong">使用</view>
							<text class="shen" @click="shentui(item)">申请退款</text>
						</view>
						<view class="shiview tui" v-if="item.status==4">
							<view class="shiyong">{{ item.status_text }}</view>
							<!-- <text class="shen" @click="shentui(item)">申请退款</text> -->
						</view>
						<image class="shiyong" v-if="item.status_text=='已使用'" src="@/pages_subject/static/img/shiyong.png" mode="" />
						<image class="shiyong" v-if="item.status_text=='已过期'" src="@/pages_subject/static/img/guoqi.png" mode="" />
					</view>
				</view>
				<!-- <view class="xitem ">
					<image class="kabg" src="@/pages_subject/static/img/kabg.png" mode="" />
					<view class="xinleft">
						<view class="xinnei">
							<text class="xbiao">考点两次查询权限卡</text>
							<text class="lei">有效期：2021.09.130-2022.09.13</text>
							<text class="lei">类别：购买权限卡</text>
						</view>
						<image class="shiyong" src="@/pages_subject/static/img/shiyong.png" mode="" />
					</view>
				</view>
				<view class="xitem ">
					<image class="kabg" src="@/pages_subject/static/img/kabg.png" mode="" />
					<view class="xinleft">
						<view class="xinnei">
							<text class="xbiao">考点两次查询权限卡</text>
							<text class="lei">有效期：2021.09.130-2022.09.13</text>
							<text class="lei">类别：购买权限卡</text>
						</view>
						<image class="shiyong" src="@/pages_subject/static/img/guoqi.png" mode="" />
					</view>
				</view> -->
				<u-loadmore :status="status" @loadmore="loadmore" style="margin-top: 30rpx;" />
			</view>
		</view>
		<!-- <view class="botview">
			<view class="botleft">
				<image class="icon_fenxiang" src="/static/icon_fenxiang.png" mode="" />
				<text>分享</text>
			</view>
			<view class="lianxi" :style="{
				background:Themecolor
			}">
				联系客服
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				list: [{}],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
			}
		},
		onLoad() {

			// console.log(this.Themecolor)
			this.getList()
		},
		onShow() {
		},
		onReachBottom: function () {
			this.loadmore();
		},
		methods: {
			change(index) {
				this.current = index;
			},
			toDtail(item){
				this.navrouter("/pages_subject/twoPage/XieYiDetail?id="+item.id+'&type=2');
			},
			async getList(){
				let res = await this.$u.api.getVipOrderList({
					page:this.page,
					shop_id:uni.getStorageSync('shop_id')
				});
				console.log(res)
				this.last_page = res.lastpage;
				// let shuju = res.data
				// for(let i in shuju){
				// 	shuju[i].iszhan = false
				// }
				
				let list = res.list;
				this.list = this.page == 1 ? list : [...this.list, ...list];	
				// console.log(this.list)
				if(this.page >= this.last_page){
				this.status = 'nomore';
				}
			},
			loadmore() {
				let page = this.page;
				// let last_page = this.last_page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			shentui(item){
				this.navrouter("/pages_subject/twoPage/tuikuan?id="+item.id);
			},
			shiyong(){
				this.navrouter("/pages_subject/twoPage/KaoDian");
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		// padding-bottom: 150rpx;
		min-height: 100vh;
		padding: 30rpx;
		.xlist{
			display: flex;
			flex-direction: column;
			.xitem{
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(196,198,255,0.39);
				border-radius: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;
				margin-bottom: 20rpx;

				.kabg{
					position: absolute;
					width: 100%;
					height: 100%;
					display: none;
				}
				.xinleft{
					position: relative;
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 25rpx 50rpx;
					width: 100%;
					height: 100%;
					.xinnei{
						display: flex;
						width: 75%;
						flex-direction: column;
						.xbiao{
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 800;
							color: #1B1B1B;
						}
						.lei{
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #919191;
							display: inline-block;
							margin-top: 8rpx;
							// opacity: 0.5;
						}
					}
					.shiyong{
						margin-left: auto;
						width: 142rpx;
						height: 142rpx;
					}
					
				}
				.jone{
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 20rpx 30rpx 0rpx;
					.jishu{
						padding: 14rpx 25rpx;
						background: linear-gradient(0deg, #FF8C53 0%, #FF4E87 100%);
						border-radius: 10rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
					.time{
						margin-left: auto;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}
			.xactive{
				.kabg{
					display: inline-block;
				}
				.xinleft{
					.xinnei{
						.xbiao{
							color: #fff;
						}
						.lei{
							color: #fff;
						}
					}

					.shiyong{
						margin-left: auto;
						width: 121rpx;
						height: 48rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 9rpx 24rpx 0rpx rgba(255,98,124,0.21), 0rpx 0rpx 79rpx 0rpx rgba(255,255,255,0.35);
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #0082FB;
					}
					.shiview{
						display: flex;
						flex-direction: column;
						margin-left: auto;
						align-items: center;
						justify-content: center;

					}
					.tui{
						.shiyong{
							color: #ff6d00;
						}
					}
					.shen{
						color: #fff;
						display: inline-block;
						margin-top: 10rpx;
						font-size: 22rpx;
						font-weight: 400;
					}
					
				}
			}
			.qiexian{
				width: 100%;
				height: 7rpx;
				// margin-bottom: 30rpx;
			}
			.xinlist{
				display: flex;
				flex-direction: column;
				// padding-bottom: 35rpx;
				padding:30rpx;

				.xinitem{
					display: flex;
					margin-bottom: 25rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				.xinitem:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
	.botview{
			height: 120rpx;
			background: #FFFFFF;
			width: 100%;
			position: fixed;
			bottom: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			z-index: 10;
			border-top: 1rpx solid #eee;
			padding: 0 30rpx 20rpx 0;
			.botleft{
				width: 20%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.icon_fenxiang{
					width: 44rpx;
					height: 44rpx;

				}
				text{
					font-size: 18rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
			.lianxi{
				margin-left: auto;
				width: 75%;
				height: 72rpx;
				background: #AC1F33;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	.zhanwei{
		height: 20rpx;
		width: 100%;
		background-color: #f6f6f6;
	}
</style>
